<template>
  <m-modal
    v-model="visible"
    v-clickoutside="handleCancel"
    class="v-choose-element"
    :width="754"
    :title='title'
    :left="x"
    :top="y"
    @cancel="handleCancel"
  >
    <div>
      <div class="_content">
        <a-collapse v-model="activeKey" expand-icon-position="right" @change="handleChange">
          <template #expandIcon="{ isActive }">
            <div>
              <img src="statics/icons/app/arrowdown12.svg" class="_collapse-icon" :class="{_expand:isActive}">
            </div>
          </template>
          <a-collapse-panel
            v-for="(group,groupIndex) in listFilterd"
            :key="String(groupIndex)"
            :header="group.label"
            :disabled="false"
            :forceRender="true">
            <a-row type="flex" justify="start" align="middle">
              <a-col
                v-for="(item,index) in group.children"
                :key="index"
                :span="3"
                @click="handleClickItem(item)">
                <div class="_item">
                  <img :src="item.icon" style="position: relative;top: 10px;" class="g-m-r-4 g-m-l-8"/>
                  <p>
                    {{item.label}}
                  </p>
                </div>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </m-modal>
</template>
<script>
import CustomModal from 'src/components/common/CustomModal';
import { Portal } from 'src/components/common/Portal.vue';
import Clickoutside from 'src/components/common/ContextMenu/clickoutside';

const comp = {
  name: 'element-matrix',
  components: {
    'm-modal': CustomModal,
  },
  props: {
    title: String,
    x: Number,
    y: Number,
    list: Array, //// [[{label:'',value:'',icon:'',children:[]}]] //// 第一层为分组，一组的元素会出现分割线，后期考虑做分组title，第二层为用于选择的元素
  },
  directives: {
    Clickoutside,
  },
  data() {
    return {
      keyWord: '',
      visible: false,
      hasClicked: false,
      activeKey: ['0', '1', '2', '3'],
    };
  },
  computed: {
    listFilterd() {
      if (!this.keyWord) return this.list;
      else {
        const listFilterd = [];
        this.list.forEach((group) => {
          const matchs = group.children.filter((i) =>
            i.label.includes(this.keyWord)
          );
          if (matchs.length) {
            listFilterd.push({ ...group, children: matchs });
          }
        });
        return listFilterd;
      }
    },
  },
  beforeMount() {},
  mounted() {
    this.visible = true;
  },
  methods: {
    handleOk(key) {
      this.visible = false;

      this.$emit('sure', key);
    },
    handleCancel() {
      this.visible = false;
      this.$emit('close');
    },

    handleClickItem(item) {
      if (this.hasClicked) return;
      this.hasClicked = true;
      this.handleOk(item);
    },
    handleChange(data) {
      console.log(data);
    },
  },
};

export default comp;
export const elementMatrix = new Portal(comp, { single: true });
export const portal = elementMatrix;
</script>
<style lang="scss" scoped>
.v-choose-element {
	._content {
		height: 541px;
		overflow: auto;
		padding: 0;
		.ant-collapse {
			border: none;
			._collapse-icon {
				display: inline-block;
				position: relative;
				&._expand {
					transform: rotate(180deg);
				}
			}
		}
		/deep/ .ant-collapse-header {
			height: 24px;
			line-height: 24px;
			padding: 0;
			padding-left: 20px !important;
			font-size: 12px;
      background: #f2f2f2;
		}
		/deep/ .ant-collapse-content-box {
			width: 100%;
			._item {
				width: 72px;
				height: 76px;
				font-size: 12px;
				background: white;
				text-align: center;
				cursor: pointer;
				&:hover {
					background: #3483B8;
          color: #fff;
				}
				img {
					width: 48px;
					height: 48px;
				}
				p {
					margin-top: 10px;
				}
			}
		}
	}
}
</style>
